<template>
  <div class="sn_center">
    <div class="log"><img src="@/assets/images/gzhlg.png" alt=""></div>
    <div class="search_input">
      <el-button type="primary" @click="scan">激活扫一扫</el-button>
    </div>
    <div class="coding">2021@深圳市七彩宏云智能设备有限公司</div>
  </div>
</template>

<script>
import { getWxJsApiInfo, activationEbagSnCode } from "@/api/wxAccounts.js";
import wx from 'weixin-js-sdk'
export default {
  data() {
    return { }
  },
  created() {
    this.getWxJsApiInfo()
  },
  methods: {
    getWxJsApiInfo() {
      getWxJsApiInfo({ url: window.location.href }).then(({ data }) => {
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: data.appId, // 必填，公众号的唯一标识
          timestamp: data.timestamp, // 必填，生成签名的时间戳
          nonceStr: data.nonceStr, // 必填，生成签名的随机串
          signature: data.signature,// 必填，签名
          jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表
        });
        wx.ready(() => {
          console.log('配置成功')
        })
        wx.error(() => {
          console.log('配置失败')
        })
      }).catch(err => { })
    },
    scan() {
      let that = this
      wx.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
        success: function (res) {
          const result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
          that.$confirm('扫描成功, 是否激活?', '提示', {
            customClass: 'scan',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
              activationEbagSnCode({sn: result}).then(res => {
                  that.$message.success(res.msg)
              })
          }).catch(() => {
            that.$message({ type: 'info', message: '已取消' });
          });
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.sn_center {
  height: 100%;
  background-image: -webkit-linear-gradient(90deg, #0079ff 0%, #00bcff 100%);
  .coding {
    position: absolute;
    bottom: 10%;
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: #fff;
  }
  .log {
    position: absolute;
    height: 80px;
    width: 200px;
    top: 15%;
    left: 50%;
    transform: translate(-50%, 0);
    img {
      height: 100%;
      width: 100%;
    }
  }
  .search_input {
    position: relative;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);
    text-align: center;
    .search_icon {
      position: absolute;
      right: 0;
      top: 0;
      width: 40px;
      height: 40px;
      img {
        margin: 10px 0 0 10px;
        width: 20px;
        height: 20px;
      }
    }
  }
}
</style>